<template>
    <div class="sdy-home-nav-list">
        <van-swipe >
        <van-swipe-item
        class="swiper-container" 
        :duration="300"
        :loop="false"
        indicator-color="red"
        >
        <van-grid :column-num="5">
        <van-grid-item v-for="item in navs" :key="item.id" :icon="item.img" :text="item.title" />
         </van-grid>
        </van-swipe-item>
        <van-swipe-item>
            <van-grid :column-num="3">
            <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
            </van-grid>
        </van-swipe-item>
    </van-swipe>
    </div>
</template>
<script setup lang="ts">
    const navs = [
    { id: 1, title: '超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 2, title: '电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
    { id: 3, title: '新百货', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png' },
    { id: 4, title: '生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
    { id: 5, title: '到家', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png' },
    { id: 6, title: '充值', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png' },
    { id: 7, title: '附近', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
    { id: 8, title: '领券', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png' },
    { id: 9, title: '会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' },
    { id: 10, title: '国际', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
]
</script>
<style scoped lang="scss">
    .sdy-home-nav-list{
        height:210px ;
        box-sizing: border-box;
        padding: 15px;

        >swiper-container{
            height: 100%;
        }
    }
</style>